<!DOCTYPE html>
<html>
<head>
	 <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>预售详情页分享</title>
     <link rel="stylesheet" href="https://ttresource.oss-cn-beijing.aliyuncs.com/handupload/video.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/4.2.0/css/swiper.min.css">
    <style>
        body, html{font-family: PingFangSC-Regular, sans-serif;}
        body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
        body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
        h1, h2, h3, h4, h5, h6{ font-size:100%; }
        address, cite, dfn, em, var { font-style:normal; }
        code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
        small{ font-size:12px; }
        ul, ol { list-style:none; }
        a { text-decoration:none; }
        a:hover { text-decoration:underline; }
        sup { vertical-align:text-top; }
        sub{ vertical-align:text-bottom; }
        legend { color:#000; }
        fieldset, img { border:0; }
        button, input, select, textarea { font-size:100%; }
        table { border-collapse:collapse; border-spacing:0; }

        .line{
            width: 100%;
            height: 10px;
            background: #f3f3f3;
        }
        .bor_no{
            border: none!important;
        }
        .red_color{
            color: #FF4954!important;
        }
        .AdvanceSaleDetails{
            width: 100%;
            /*height: 100%;*/
            position: absolute;
            left: 0;
            top: 0;
            background: #F3F3F3;
        }
        .downheader{
            width: 100%;
            height: 60px;
            background: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;
            position: absolute;
        }
        .logo_img{
            width: 127px;
            height: 41px;
        }
        .logo_img img{
            width: 100%;
            height: 100%;
            display: block;
        }
        .down_btn{
            width: 100px;
            height: 35px;
            border: 1px solid #ccc;
            border-radius: 4px;
            line-height: 37px;
            text-align: center;
            font-size: 14px;
            font-weight: 400;
            color: #000;
        }
        .down_bg_box{
            width: 100%;
            height: 200px;
            overflow: hidden;
        }
        .down_bg_box img{
            width: 100%;
            height: auto;
        }
        .AdvanceSaleDetails_card_box{
            width: 100%;
            padding: 0 18px;
            box-sizing: border-box;
            position: absolute;
            top: 145px;
        }
        .AdvanceSaleDetails_card{
            min-height: 150px;
            background: #fff;
            border-radius: 4px;
            padding: 0 18px;
            box-sizing: border-box;
        }
        .AdvanceSaleDetails_card_one{
            font-size: 16px;
            color: #2A2A2A;
            /*border-bottom: 1px solid #DFDFDF;*/
            font-weight: 500;
            line-height: 50px;
        }
        .AdvanceSaleDetails_card_two{
            font-size: 14px;
            color: #2A2A2A;
            font-weight: 400;
            border-bottom: 1px solid #DFDFDF;
            padding-bottom: 13px;
        }
        .AdvanceSaleDetails_card_three{
        	width: 100%;
             font-size: 14px;
            color: #6F757C;
            font-weight: 400;
            height: 70px;
            display: flex;
            align-items: center;
        	justify-content: space-between;
        }
        .AdvanceSaleDetails_card_three_flex{
        	display: flex;
        	align-items: center;
        }
        .AdvanceSaleDetails_card_three_one{
        	width: 36px;
        	height: 36px;
        	border-radius: 100%;
        	overflow: hidden;
        	margin-right: 10px;
        }
        .AdvanceSaleDetails_card_three_one img{
        	width: 100%;
        	height: 100%;
        	display: block;
        }
        .AdvanceSaleDetails_card_three_two{
        	font-size: 14px;
        	color: #2A2A2A;
        	font-weight: 400;B5B5B5
        }
        .AdvanceSaleDetails_card_three_three{
        	font-size: 12px;
        	color: #B5B5B5;
        	font-weight: 400;
        }
        .AdvanceSaleDetails_card_three_four{
		    width: 6px;
		    height: 10px;
		    margin-left: 10px;
		}
		.AdvanceSaleDetails_card_three_four img{
		    width: 100%;
		    height: 100%;
		    display: block;
		}
        .number{
            display: flex;
            height: 72px;
            align-items: center;
            border-bottom: 1px solid #DFDFDF;
            border-top: 1px solid #DFDFDF;
        }
        .num1{
            width: 25%;
        }
        .nums{
            padding-left: 15px;
            width: 30%;
            border-left: 1px solid #d8d8d8;
            border-right: 1px solid #d8d8d8;
        }
        .num3{
            width: 45%;
            padding-left: 15px;
        }
        .amount{
            font-size: 18px;
            color: #2A2A2A;
            font-weight: 600;
        }
        .count{
            font-size: 10px;
            color: #6F757C;
            font-weight: 400;
        }
        .find_nav_box{
            height: 50px;
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #C3C3C3;
            font-weight: 500;
            margin-top: 158px;
            background: #fff;
            border-bottom: 1px solid #f0f0f0;
            position: relative;
        }
        .write_bg{
        	width: 100%;
        	height: 50px;
        	background: #fff;
        	position: absolute;
        	bottom: -51px;
        }
        .find_total{
            width: 32%;
            padding-left: 18px;
        }
        .find_nav{
            width: 100%;
            display: flex;
            justify-content: space-around;
        }
        .find_nav div{
            /* width: 24%; */
            position: relative;
        }
        .find_nav_active{
            color: #2A2A2A;
        }
        .find_nav_active:after{
            content: "";
            position: absolute;
            border-bottom: 2px solid #2A2A2A;
            bottom: -16px;
            left: 0;
            width: 100%;
        }
        .dind1 {
            width: 100%;
            overflow: hidden;
            background: #F2F2F2;
        }

        .find_user_info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 18px 18px 5px 18px;
        }

        .find_user_flex {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #2A2A2A;
            font-weight: 500;
        }

        .user_info_head {
            width: 28px;
            height: 28px;
            border-radius: 100%;
            overflow: hidden;
            margin-right: 7px;
        }

        .user_info_head img {
            width: 100%;
            height: 100%;
        }

        .find_user_time {
            font-size: 12px;
            color: #B5B5B5;
            font-weight: 400;
        }

        .find_desc {
            padding: 0 18px 10px 51px;
            font-size: 14px;
            color: #6F757C;
            font-weight: 400;
        }

        .find_user_selfie {
            padding: 0px 18px 18px 0;
            margin-left: 51px;
            border-bottom: 1px solid #DFDFDF;
            display: flex;
            flex-wrap: wrap;
        }

        .find_user_selfie_img {
            width: 80px;
            height: 80px;
            margin-right: 6px;
            margin-bottom: 6px;
        }

        .find_user_selfie_img img {
            width: 100%;
            height: 100%;
            display: block;
        }
        .videoBg{
        	margin: 18px;
        }
        .videoBgs {
            padding: 18px;
            width: 100%;
            height: 200px;
            box-sizing: border-box;
            /* overflow: hidden; */
        }

        .find_chazhuang_img {
            width: 100%;
            height: auto;
        }

        .find_chazhuang_img img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .find_chazhuang {
            box-sizing: border-box;
            overflow: hidden;
            margin-top: 40px;
        }

        .swiper_box {
            width: 190px;
            margin-top: 40px;
            margin-bottom: -20px;
            overflow-x: scroll;
        }

        .swiper {
            width: 10000px;
            display: flex;
            overflow-x: scroll;
        }

        .swiper_item {
            width: 300px;
            height: 118px;
            background: #ccc;
            margin-right: 20px;
            overflow-x: scroll;
        }

        .swiper-container {
        	margin-left: 18px;
            margin-top: 20px!important;
            width: 100%;
            height: 118px;
            margin-bottom: -20px!important;
        }

        .swiper-slide {
            /* text-align: center; */
            font-size: 18px;
            background: #fff;
            min-width: 300px;
            width: auto!important;
            font-size: 10px;
            color: #6F757C;
            font-weight: 400;
        }

        .swiper-slide>div {
            height: 28px;
            border-bottom: 1px solid #DFDFDF;
            display: flex;
            align-items: center;
            margin: 0 18px;
        }

        .swiper-slide>div:last-child {
            border: none;
        }

        .swiper-slide>div>div:nth-child(1) {
            /* width: 50%; */
        }

        .swiper-slide>div>div:nth-child(2) {
            /* width: 50%; */
            padding-left: 50px;
        }

        .find_swiper_flex {
            display: flex;
            align-items: center;
        }
        .dind3{
        	background: #fff;
        }
    </style>
</head>
<body>
	<div class="AdvanceSaleDetails">
        <div class="down_bg_box">
            <img src="./image/share_bg.png">
        </div>
        <div class="AdvanceSaleDetails_card_box">
            <div class="AdvanceSaleDetails_card">
                <div class="AdvanceSaleDetails_card_one">大湾2018年春茶第一季</div>
                
                <div class="number">
		            <div class="num1">
		                <div class="amount">1600</div>
		                <div class="count">当前剩余</div>
		            </div>
		            <div class="nums">
		                <div class="amount">¥5,6.00</div>
		                <div class="count">预售价格</div>
		            </div>
		            <div class="num3">
		                <div class="amount red_color">01天03时25分</div>
		                <div class="count">预售剩余时间</div>
		            </div>
        		</div>
                <div class="AdvanceSaleDetails_card_three">
                	<div class="AdvanceSaleDetails_card_three_flex">
                		<div class="AdvanceSaleDetails_card_three_one"><img src="./image/goodsImg.png"></div>
                		<div class="AdvanceSaleDetails_card_three_two">湾润号</div>
                	</div>
                	<div class="AdvanceSaleDetails_card_three_flex">
                		<div class="AdvanceSaleDetails_card_three_three">品牌详情</div>
                		<div class="AdvanceSaleDetails_card_three_four"><img src="./image/chevron_right.png"></div>
                	</div>
                </div>
                
            </div>
        </div>
        <div class="find_nav_box">
            <div class="find_nav">
                <div class="find_nav_active">产品详情</div>
                <div>用户评论</div>
            </div>
            <div class="write_bg">
            	
            </div>
        </div>
        <div class="find_tab_box">
            <div class="dind1 finds">
                <div class="videoBg">
                    <video id="my-video" class="video-js videoBgs videoBgs1" controls preload="auto" poster="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSMkZ8908OI26Xnnsei6xpcJdMMR15Ozd7e_IBXNYzbp860vjdg"
                        data-setup="{}">
                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a web browser that
                            <a href="http://videojs.com/html5-video-support/" target="_self">supports HTML5 video</a>
                        </p>
                    </video>
                </div>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div>
                                <div>种类: data.kind </div>
                                <div>年份: data.age </div>
                            </div>
                            <div>
                                <div>规格: data. </div>
                                <div>发行量: data. </div>
                            </div>
                            <div>原料: data.material </div>
                            <div>仓储库房: data.repo </div>
                        </div>
                        <div class="swiper-slide">
                            <div>
                                <div>工艺: data.technology </div>
                                <div>茶山: data. </div>
                            </div>
                            <div>
                                <div>海拔: data.altitude </div>
                                <div>古树量: data. </div>
                            </div>
                            <div>
                                <div>年平均气温: data. </div>
                                <div>年平均降水: data. </div>
                            </div>
                            <div>产地: 云南省普洱市</div>
                        </div>
                    </div>
                </div>
                <div class="find_chazhuang">
                    <div class="find_chazhuang_img">
                        <img src="http://ttresource.oss-cn-beijing.aliyuncs.com/handupload/921516853205_.pic_hd%403x.png" alt="">
                    </div>
                </div>
            </div>
            <div class="dind3 finds" style="display: none">
            	<div>
				    <div class="find_user_info">
				        <div class="find_user_flex">
				            <div class="user_info_head">
				                <img src="http://ttresource.oss-cn-beijing.aliyuncs.com/handupload/921516853205_.pic_hd%403x.png" alt="">
				            </div>
				            <div>柱子</div>
				        </div>
				        <div class="find_user_time">2018.01.22</div>
				    </div>
				    <div class="find_desc">预售买了之后就提仓泡来喝了, 味道很好。
				    </div>
				    <div class="find_user_selfie">
				        <div class="find_user_selfie_img">
				            <img src="http://ttresource.oss-cn-beijing.aliyuncs.com/handupload/921516853205_.pic_hd%403x.png" alt="">
				        </div>
				        <div class="find_user_selfie_img">
				            <img src="http://ttresource.oss-cn-beijing.aliyuncs.com/handupload/921516853205_.pic_hd%403x.png" alt="">
				        </div>
				        <div class="find_user_selfie_img">
				            <img src="http://ttresource.oss-cn-beijing.aliyuncs.com/handupload/921516853205_.pic_hd%403x.png" alt="">
				        </div>
				        <div class="find_user_selfie_img">
				            <img src="http://ttresource.oss-cn-beijing.aliyuncs.com/handupload/921516853205_.pic_hd%403x.png" alt="">
				        </div>
				        <div class="find_user_selfie_img">
				            <img src="http://ttresource.oss-cn-beijing.aliyuncs.com/handupload/921516853205_.pic_hd%403x.png" alt="">
				        </div>
				        <div class="find_user_selfie_img">
				            <img src="http://ttresource.oss-cn-beijing.aliyuncs.com/handupload/921516853205_.pic_hd%403x.png" alt="">
				        </div>
				        <div class="find_user_selfie_img">
				            <img src="http://ttresource.oss-cn-beijing.aliyuncs.com/handupload/921516853205_.pic_hd%403x.png" alt="">
				        </div>
				        <div class="find_user_selfie_img">
				            <img src="http://ttresource.oss-cn-beijing.aliyuncs.com/handupload/921516853205_.pic_hd%403x.png" alt="">
				        </div>
				    </div>
				</div>
        	</div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="http://vjs.zencdn.net/6.6.3/video.js"></script>
<script src="https://cdn.bootcss.com/Swiper/4.2.0/js/swiper.min.js"></script>
<script type="text/javascript">
	 $('.find_nav div').click(function() {
            var i = $(this).index();//下标第一种写法
            $(this).addClass('find_nav_active').siblings().removeClass('find_nav_active');
            $('.find_tab_box .finds').eq(i).show().siblings().hide();
            if(i == 1) {
            	$(".write_bg").hide()
            }else{
            	$(".write_bg").show()
            }
        });
	 var swiper = new Swiper('.swiper-container', {
        slidesPerView: 'auto',
        spaceBetween: 30,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });
</script>
</html>